<template>
  <div class="container">
    <!-- 头部导航 -->
    <header class="header">
      <div class="logo">
        <img
            src="../assets/img/深圳中学logo2.jpg"
            alt="深圳中学Logo"
            style="width: 150px; height: auto;"
        >
      </div>
    </header>
    <div class="choice">
      <nav class="nav-menu">
        <a href="https://www.shenzhong.net/" target="_blank">首页</a>
        <a href="https://www.shenzhong.net/single_14.html" target="_blank">学校概况</a>
        <a href="https://www.shenzhong.net/textnewslist_147.html" target="_blank">招生专栏</a>
        <a href="https://www.shenzhong.net/textnewslist_23.html" target="_blank">深中新闻</a>
      </nav>
    </div>


    <!-- 轮播图区域 -->
    <section class="banner">
      <img
          src="https://www.shenzhong.net/Uploads/20210129041747_%E6%9C%AA%E6%A0%87%E9%A2%98-11.jpg"
          alt="深圳中学宣传图"
      >
    </section>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 通知公告 -->
      <section class="news-section notices">
        <h2 class="section-title">
          <a href="https://www.shenzhong.net/textnewslist_60.html" target="_blank">通知公告</a>
          <span class="more">更多</span>
        </h2>
        <div class="news-grid">
          <article v-for="(item, index) in notices" :key="index" class="news-card">
            <div class="news-content">
              <h3><a :href="item.link" target="_blank">{{ item.title }}</a></h3>
              <p class="news-meta">{{ item.date }}</p>
            </div>
          </article>
        </div>
      </section>

      <!-- 招标公告 -->
      <section class="tender-section">
        <h2 class="section-title">
          <a href="https://www.shenzhong.net/textnewslist_62.html" target="_blank">招标公告</a>
          <span class="more">更多</span>
        </h2>
        <div class="tender-grid">
          <article v-for="(item, index) in tenders" :key="index" class="tender-card">
            <h3><a :href="item.link" target="_blank">{{ item.title }}</a></h3>
            <p class="tender-meta">{{ item.date }}</p>
          </article>
        </div>
      </section>

      <!-- 深中新闻 -->
      <section class="news-section news">
        <h2 class="section-title">
          <a href="https://www.shenzhong.net/textnewslist_23.html" target="_blank">深中新闻</a>
          <span class="more">更多</span>
        </h2>
        <div class="news-grid">
          <article v-for="(item, index) in news" :key="index" class="news-card">
            <div class="news-content">
              <h3><a :href="item.link" target="_blank">{{ item.title }}</a></h3>
              <p class="news-meta">{{ item.date }}</p>
            </div>
          </article>
        </div>
      </section>

      <!-- 校长简介 -->
      <section class="principal-section">
        <h2 class="section-title">校长简介</h2>
        <div class="principal-card">
          <img src="../assets/img/科比.png" class="principal-avatar">
          <div class="principal-info">
            <h3>{{ principal.name }}</h3>
            <p class="principal-title">{{ principal.position }}</p>
            <p class="principal-bio">{{ principal.bio }}</p>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部信息 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-col">
          <h4>联系我们</h4>
          <p>地址：深圳市罗湖区人民北路深中街18号</p>
          <p>电话：0755-82222572</p>
          <p>Email：office@shenzhong.net</p>
        </div>
        <div class="footer-col">
          <h4>快速通道</h4>
          <ul>
            <li><a href="http://lib.shenzhong.net/" target="_blank">我的图书馆</a></li>
            <li><a href="https://www.shenzhong.net/szxzxx_71.html" target="_blank">校长信箱</a></li>
            <li><a href="https://www.shenzhong.net/textnewslist_147.html" target="_blank">招生专栏</a></li>
            <li><a href="https://www.shenzhong.net/caiwu_61.html" target="_blank">财务专栏</a></li>
            <li><a href="https://www.shenzhong.net/href_173.html" target="_blank">学习资源</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-copyright">
        © 2017 深圳中学 · 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备11075265号</a>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import { ref } from 'vue';
import { use, registerMap } from 'echarts/core';
import countup from '@/components/countup.vue';

import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
import chinaMap from '@/utils/china';
use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  LineChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MapChart,
]);
registerMap('china', chinaMap);
// 通知公告数据
const notices = ref([
  {
    title: "深圳中学2025年3月面向2025年应届生赴外招聘教师补充公告",
    date: "03-20",
    link: "https://www.shenzhong.net/textnewslist_60/16845.html",
  },
  {
    title: "深圳中学2025年3月面向2025年应届毕业生赴外招聘教师公告",
    date: "03-19",
    link: "https://www.shenzhong.net/textnewslist_60/16789.html",
  },
  {
    title: "关于2025年春季学期高中学生资助工作的通知",
    date: "03-19",
    link: "https://www.shenzhong.net/textnewslist_60/16790.html",
  },
  {
    title: "深圳中学2024年11月选聘教师拟聘人员公示",
    date: "01-12",
    link: "https://www.shenzhong.net/textnewslist_60/16600.html",
  },
  {
    title: "深圳中学2024年3月面向2024年应届毕业生赴外招聘教师拟聘人员公示（二）",
    date: "12-31",
    link: "https://www.shenzhong.net/textnewslist_60/16599.html",
  },
  {
    title: "深圳中学2024年11月公开选聘教师成绩及入围体检名单的公告",
    date: "12-23",
    link: "https://www.shenzhong.net/textnewslist_60/16598.html",
  },
]);

// 招标公告数据
const tenders = ref([
  {
    title: "2025年高一年级研学实践活动招标公告",
    date: "03-21",
    link: "https://www.shenzhong.net/textnewslist_62/16654.html",
  },
  {
    title: "东门校区绿地景观工程采购意向公示",
    date: "03-06",
    link: "https://www.shenzhong.net/textnewslist_62/16653.html",
  },
  {
    title: "学生宿舍外设置手机集中保管柜及监控项目采购意向公示",
    date: "02-25",
    link: "https://www.shenzhong.net/textnewslist_62/16652.html",
  },
  {
    title: "2025年高一年级研学实践活动项目采购意向公示",
    date: "02-25",
    link: "https://www.shenzhong.net/textnewslist_62/16651.html",
  },
]);

// 深中新闻数据
const news = ref([
  {
    title: "深中羽毛球队在中国中学生羽毛球精英赛中获佳绩",
    date: "02-24",
    link: "https://www.shenzhong.net/textnewslist_23/16532.html",
  },
  {
    title: "AI×材料=？张统一院士为深中师生揭开材料的神秘面纱",
    date: "03-24",
    link: "https://www.shenzhong.net/textnewslist_23/16533.html",
  },
  {
    title: "创意改变世界！Think big, start small!",
    date: "03-14",
    link: "https://www.shenzhong.net/textnewslist_23/16534.html",
  },
  {
    title: "双商并举全情育人，做有温度的教育——新学期第一次班主任实务培训会议",
    date: "03-13",
    link: "https://www.shenzhong.net/textnewslist_23/16535.html",
  },
  {
    title: "声声不息！深中合唱团获全省一等奖",
    date: "03-04",
    link: "https://www.shenzhong.net/textnewslist_23/16536.html",
  },
  {
    title: "总分第三！深中学子闪耀美国青年物理学家邀请赛",
    date: "02-26",
    link: "https://www.shenzhong.net/textnewslist_23/16537.html",
  },
  {
    title: "深中学子闪耀2024WRCF世界机器人大赛",
    date: "02-20",
    link: "https://www.shenzhong.net/textnewslist_23/16538.html",
  },
  {
    title: "深中田径健儿全国赛场展锋芒",
    date: "02-20",
    link: "https://www.shenzhong.net/textnewslist_23/16539.html",
  },
  {
    title: "静听花开，深中学子用爱点亮无声世界",
    date: "02-17",
    link: "https://www.shenzhong.net/textnewslist_23/16540.html",
  },
  {
    title: "深中学子天籁之声唱响世界音乐之都",
    date: "02-12",
    link: "https://www.shenzhong.net/textnewslist_23/16541.html",
  },
  {
    title: "月亮和六便士完美结合的名校：《择校之道》解读深中国际教育的发展之道",
    date: "02-11",
    link: "https://www.shenzhong.net/textnewslist_23/16542.html",
  },
  {
    title: "温暖‘不打烊’：深中那些暖心故事与新年期许",
    date: "02-06",
    link: "https://www.shenzhong.net/textnewslist_23/16543.html",
  },
  {
    title: "弦动华章，乐奏辉煌 | 深中民族管弦乐团获全省一等奖",
    date: "01-26",
    link: "https://www.shenzhong.net/textnewslist_23/16544.html",
  },
]);

// 校长简介数据
const principal = ref({
  name: "牢大",
  position: "校长",
  avatar: "../assets/img/科比.png", // 修改为直接使用 URL
  bio: "哈基大"})
</script>

<style>
/* 基础样式 */
:root {
  --primary-color: #146e3c; /* 深圳中学绿色主色调 */
  --secondary-color: #4c8c2b;
  --text-color: #333;
  --light-bg: #f5f6f5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', sans-serif;
  line-height: 1.5; /* 稍微减小行高 */
  color: var(--text-color);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 头部样式 */
.header {

}

.logo {
  margin-bottom: 10px; /* 在logo和导航菜单之间添加间距 */
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white; /* 头部背景为白色 */
  border-bottom: 1px solid #e5e5e5;
}

.choice {
  background-color: #4c8c2b; /* 导航栏背景为绿色 */
  width: 100%;
  display: flex;
  justify-content: center; /* 水平居中导航菜单 */
  height: 50px;
}

.nav-menu {
  display: flex;
  justify-content: space-between; /* 均匀分布导航项 */
  align-items: center;
  height: 100%;
  width: 90%; /* 缩小宽度，与边界保持距离 */
  padding: 0 20px; /* 添加左右内边距 */
}

.nav-menu a {
  text-decoration: none;
  color: #fff; /* 导航文字颜色为白色 */
  font-size: 14px; /* 减小字体大小 */
  font-weight: 500;
}

.nav-menu a:hover {
  color: var(--secondary-color); /* 鼠标悬停时使用次级绿色 */
}

/* 轮播图 */
.banner img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

/* 主要内容区 */
.main-content {
  display: grid;
  grid-template-areas:
    "notices news principal"
    "tenders news principal";
  grid-template-columns: 1fr 2fr 1fr; /* 左中右列宽比例 */
  grid-template-rows: auto auto; /* 两行 */
  gap: 20px; /* 网格间距 */
  padding: 30px 0;
  background: var(--light-bg);
}

.notices {
  grid-area: notices; /* 左上角 */
}

.tender-section {
  grid-area: tenders; /* 左下角 */
}

.news {
  grid-area: news; /* 中间 */
}

.principal-section {
  grid-area: principal; /* 右边 */
}

/* 通用标题样式 */
.section-title {
  font-size: 20px; /* 减小标题字体大小 */
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title a {
  color: var(--text-color);
  text-decoration: none;
}

.section-title a:hover {
  color: var(--primary-color);
}

.section-title .more {
  font-size: 12px; /* 减小“更多”字体大小 */
  color: #999;
  cursor: pointer;
}

.section-title .more:hover {
  color: var(--primary-color);
}

/* 通知公告和深中新闻 */
.news-grid {
  display: flex;
  flex-direction: column;
}

.news-card {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background: #fff;
  padding: 12px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.news-content h3 a {
  font-size: 16px; /* 减小标题字体大小 */
  color: var(--text-color);
  text-decoration: none;
}

.news-content h3 a:hover {
  color: var(--primary-color);
}

.news-meta {
  color: #999;
  font-size: 10px; /* 减小日期字体大小 */
  margin-top: 4px;
}

/* 招标公告 */
.tender-grid {
  display: flex;
  flex-direction: column;
}

.tender-card {
  background: #fff;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tender-card h3 a {
  font-size: 16px; /* 减小标题字体大小 */
  color: var(--text-color);
  text-decoration: none;
}

.tender-card h3 a:hover {
  color: var(--primary-color);
}

.tender-meta {
  color: #999;
  font-size: 10px; /* 减小日期字体大小 */
  margin-top: 4px;
}

/* 校长简介 */
.principal-card {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  overflow: hidden; /* 清除浮动 */
}

.principal-avatar {
  width: 80px; /* 减小图片大小 */
  height: 80px;
  border-radius: 50%;
  float: left; /* 图片左浮动 */
  margin-right: 15px;
}

.principal-info h3 {
  font-size: 18px; /* 减小标题字体大小 */
  margin-bottom: 8px;
}

.principal-title {
  font-size: 12px; /* 减小职位字体大小 */
  color: #666;
  margin-bottom: 8px;
}

.principal-bio {
  font-size: 12px; /* 减小简介字体大小 */
  color: #444;
}

/* 页脚 */
.footer {
  background: var(--primary-color);
  color: #fff;
  padding: 40px 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.footer-col h4 {
  font-size: 16px; /* 减小标题字体大小 */
  margin-bottom: 12px;
}

.footer-col p {
  font-size: 12px; /* 减小文本字体大小 */
  margin-bottom: 8px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  color: #fff;
  text-decoration: none;
  font-size: 12px; /* 减小链接字体大小 */
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-copyright {
  text-align: center;
  font-size: 10px; /* 减小版权字体大小 */
  padding: 20px 0;
  border-top: 1px solid #4c8c2b;
  margin-top: 30px;
}

.footer-copyright a {
  color: #fff;
  text-decoration: none;
}

.footer-copyright a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    text-align: center;
  }

  .nav-menu {
    justify-content: space-around; /* 小屏幕下均匀分布 */
    width: 100%; /* 小屏幕下占满宽度 */
    padding: 0 10px; /* 减小内边距 */
  }

  .nav-menu a {
    margin: 0 10px; /* 减小间距 */
  }

  .banner img {
    height: 300px;
  }

  .main-content {
    grid-template-areas:
      "notices"
      "tenders"
      "news"
      "principal";
    grid-template-columns: 1fr; /* 单列布局 */
    grid-template-rows: auto auto auto auto; /* 四行 */
  }

  .news-card,
  .principal-card {
    text-align: left; /* 保持左对齐以适应文字环绕 */
  }

  .principal-avatar {
    margin: 0 15px 15px 0; /* 调整图片间距 */
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}
</style>
